<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .top {
            height: 30px;
            background-color: #00C1DE;
            position: relative;
        }

        .top a {
            position: absolute;
            right: -40px;
            display: none;
        }

        .ad {
            overflow: hidden;
            height: 0px;
        }

        .adBox {
            position: relative;
        }

        .close {
            position: absolute;
            right: -40px;
            top: 0;
        }
    </style>
    <script>
        window.onload = function () {

            var adObj = document.getElementById('ad');
            var closeObj = document.getElementById('close');
            var replayObj = document.getElementById('replay');
            console.log(adObj);


            var t;
            function toMax(){
                var h = parseInt(window.getComputedStyle(adObj).height);//窗器当前的高度
                if (h >= 520) {
                    clearTimeout(t);
                    closeObj.style.display = 'block';
                    replayObj.style.display = 'none';
                    setTimeout(toMin,5000)
                } else {
                    adObj.style.height = h + 20 + 'px'  //使用当前高度+ 20，每次改变20px
                    t = setTimeout(toMax, 20);
                }
            }
            function toMin() {
                console.log("aa");
                var h = parseInt(window.getComputedStyle(adObj).height);//窗器当前的高度
                if (h <= 0) {
                    clearTimeout(t);
                    closeObj.style.display = 'none';
                    replayObj.style.display = 'block';
                } else {
                    adObj.style.height = h - 20 + 'px'  //使用当前高度+ 20，每次改变20px
                    t = setTimeout(toMin, 20);
                }
            }


            //绑定事件,重播
            replayObj.onclick = function(){
                console.log("bb")

                toMax();
                closeObj.style.display = 'block';
                replayObj.style.display = 'none';
            }

            //绑定事件,关闭
            closeObj.onclick = function(){
                toMin();
                closeObj.style.display = 'none';
                replayObj.style.display = 'block';
            }

            //默认情况下,由隐藏到显示
            toMax();






        }


        //        window.onload = function(){
        //            var adObj = document.getElementById('ad');
        //            var closeObj = document.getElementById('close');
        //            var replayObj = document.getElementById('replay');
        //            var t ;
        //            function toHide(){
        //                var h = parseInt(window.getComputedStyle(adObj).height);
        //                if (h<=0){
        //                    clearInterval(t);
        //                } else {
        //                    console.log("a");
        //                    adObj.style.height = h-1+'px';
        //                }
        //            }
        //            function toShow(){
        //                var h = parseInt(window.getComputedStyle(adObj).height);
        //                if (h>=520){
        //
        //                    clearInterval(t);
        //                } else {
        //                    console.log("b");
        //                    adObj.style.height = h+1+'px';
        //                }
        //            }
        //            closeObj.onclick = function(){
        //                clearInterval(t);
        //                closeObj.style.display = 'none';
        //                replayObj.style.display = 'block';
        //                t = setInterval(toHide,5);
        //            }
        //
        //            replayObj.onclick = function(){
        //                clearInterval(t);
        //
        //                closeObj.style.display = 'block';
        //                replayObj.style.display = 'none';
        //                t = setInterval(toShow,5);
        //            }
        //
        //        }
    </script>
</head>
<body>
<div class="container">
    <div class="adBox">
        <div class="ad" id="ad">
            <img src="http://img2.goodjobs.cn/files/960_37.gif" style="width: 1000px; height: 520px;">

        </div>
        <a href="#" id="close" class="close">关闭</a>
    </div>

    <!--网页其它部分-->
    <div class="top">
        <a href="#" id="replay">重播</a>
    </div>
    <div>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
        <h1>这是内容</h1>
    </div>
</div>
</body>
</html>